<template>
   <page-meta :page-style="$theme.pageStyle">
    <!-- #ifndef H5 -->
    <navigation-bar
        :front-color="$theme.navColor"
        :background-color="$theme.navBgColor"
    />
    <!-- #endif -->
  </page-meta>

  <page-bg></page-bg>
  <u-navbar
      :safeAreaInsetTop="false"
      :placeholder="false"
      :is-back="true"
      :is-fixed="true"
      :title="$theme.title"
      :border-bottom="false"
      :title-bold="true"
      :title-color="'#111111'"
      :background="{ background : navBg }"
  >
  </u-navbar>
  <view class="page">
    <!-- 提现记录列表 -->
    <view class="record-list">
      <view 
        v-for="(item, index) in recordList" 
        :key="index"
        class="record-item"
        @click="goToDetail(item)"
      >
        <view class="record-left">
          <view class="record-title">提现 ¥ {{ item.amount }}</view>
          <view class="record-time">{{ item.time }}</view>
        </view>
        <view class="record-right">
          <view class="record-status" :class="getStatusClass(item.status)">
            {{ getStatusText(item.status) }}
          </view>
        </view>
      </view>

      <view v-if="recordList.length === 0" class="empty-state">
        <text class="empty-text">暂无提现记录</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'WithdrawApplyHistory',
  props:{
    module:{
      default:"",
      type:String,
      required:true
    }
  },
  data() {
    return {
      recordList: [
        {
          id: 1,
          amount: '400.22',
          time: '2025.12.12 12:11',
          status: 'success' // success: 成功, failed: 失败, pending: 申请中
        },
        {
          id: 2,
          amount: '400.22',
          time: '2025.12.12 12:11',
          status: 'failed'
        },
        {
          id: 3,
          amount: '400.22',
          time: '2025.12.12 12:11',
          status: 'pending'
        },
        {
          id: 4,
          amount: '400.22',
          time: '2025.12.12 12:11',
          status: 'success'
        },
        {
          id: 5,
          amount: '400.22',
          time: '2025.12.12 12:11',
          status: 'failed'
        },
        {
          id: 6,
          amount: '400.22',
          time: '2025.12.12 12:11',
          status: 'pending'
        }
      ]
    }
  },
  onLoad() {
    this.loadData()
  },
  methods: {
    loadData() {
      // 加载提现记录
    },
    goToDetail(item) {
      uni.navigateTo({ 
        url: `/packages/pages/${this.module}/withdraw/detail?id=${item.id}` 
      })
    },
    getStatusText(status) {
      const statusMap = {
        success: '成功',
        failed: '失败',
        pending: '申请中'
      }
      return statusMap[status] || ''
    },
    getStatusClass(status) {
      return `status-${status}`
    }
  }
}
</script>

<style scoped>
.page {
  min-height: 100vh;
  background: #f5f5f5;
}

/* 记录列表 */
.record-list {
  padding: 20rpx;
}

.record-item {
  background: #fff;
  border-radius: 16rpx;
  padding: 32rpx 28rpx;
  margin-bottom: 16rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.record-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.record-title {
  font-size: 32rpx;
  color: #333;
  font-weight: 600;
}

.record-time {
  font-size: 24rpx;
  color: #ccc;
}

.record-right {
  display: flex;
  align-items: center;
}

.record-status {
  font-size: 32rpx;
  font-weight: 600;
}

.status-success {
  color: #4caf50;
}

.status-failed {
  color: #f44336;
}

.status-pending {
  color: #999;
}

/* 空状态 */
.empty-state {
  padding: 120rpx 0;
  text-align: center;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}
</style>
